import { GameBoard } from '../core/GameBoard';
import { Tetromino } from '../core/Tetromino';

/**
 * 游戏渲染器类
 * 使用Canvas API绘制游戏画面
 */
export class GameRenderer {
    private canvas: HTMLCanvasElement;
    private ctx: CanvasRenderingContext2D;
    private cellSize: number;
    private boardWidth: number;
    private boardHeight: number;

    constructor(canvas: HTMLCanvasElement, cellSize: number = 30) {
        this.canvas = canvas;
        const context = canvas.getContext('2d');
        if (!context) {
            throw new Error('Failed to get canvas context');
        }
        this.ctx = context;
        this.cellSize = cellSize;
        this.boardWidth = 10 * cellSize;
        this.boardHeight = 20 * cellSize;
        
        // 设置canvas尺寸
        canvas.width = this.boardWidth;
        canvas.height = this.boardHeight;
    }

    /**
     * 清空画布
     */
    clear(): void {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    /**
     * 绘制游戏棋盘
     */
    drawBoard(board: GameBoard): void {
        // 绘制背景
        this.ctx.fillStyle = '#1a1a2e';
        this.ctx.fillRect(0, 0, this.boardWidth, this.boardHeight);

        // 绘制网格线
        this.ctx.strokeStyle = '#16213e';
        this.ctx.lineWidth = 1;

        // 垂直线
        for (let x = 0; x <= 10; x++) {
            this.ctx.beginPath();
            this.ctx.moveTo(x * this.cellSize, 0);
            this.ctx.lineTo(x * this.cellSize, this.boardHeight);
            this.ctx.stroke();
        }

        // 水平线
        for (let y = 0; y <= 20; y++) {
            this.ctx.beginPath();
            this.ctx.moveTo(0, y * this.cellSize);
            this.ctx.lineTo(this.boardWidth, y * this.cellSize);
            this.ctx.stroke();
        }

        // 绘制已放置的方块
        for (let y = 0; y < board.height; y++) {
            for (let x = 0; x < board.width; x++) {
                const color = board.getCell(x, y);
                if (color) {
                    this.drawCell(x, y, color);
                }
            }
        }
    }

    /**
     * 绘制当前方块
     */
    drawTetromino(tetromino: Tetromino): void {
        const cells = tetromino.getCells();
        
        for (const cell of cells) {
            // 只在棋盘范围内绘制
            if (cell.y >= 0) {
                this.drawCell(cell.x, cell.y, tetromino.color);
            }
        }
    }

    /**
     * 绘制下一个方块预览（小尺寸）
     */
    drawNextTetromino(tetromino: Tetromino, startX: number, startY: number, size: number = 20): void {
        const shape = tetromino.getShape();

        // 绘制预览背景
        this.ctx.fillStyle = '#0f3460';
        this.ctx.fillRect(startX - 5, startY - 5, size * 4 + 10, size * 4 + 10);

        // 绘制方块
        for (let y = 0; y < 4; y++) {
            for (let x = 0; x < 4; x++) {
                if (shape[y][x] === 1) {
                    const pixelX = startX + x * size;
                    const pixelY = startY + y * size;
                    
                    // 绘制单元格
                    this.ctx.fillStyle = tetromino.color;
                    this.ctx.fillRect(pixelX + 1, pixelY + 1, size - 2, size - 2);

                    // 高光
                    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                    this.ctx.fillRect(pixelX + 1, pixelY + 1, size - 2, (size - 2) / 2);

                    // 阴影
                    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
                    this.ctx.fillRect(pixelX + 1, pixelY + (size - 2) / 2, size - 2, (size - 2) / 2);
                }
            }
        }
    }

    /**
     * 绘制单个单元格
     */
    private drawCell(x: number, y: number, color: string): void {
        const pixelX = x * this.cellSize;
        const pixelY = y * this.cellSize;

        // 绘制方块主体
        this.ctx.fillStyle = color;
        this.ctx.fillRect(pixelX + 1, pixelY + 1, this.cellSize - 2, this.cellSize - 2);

        // 绘制高光效果
        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        this.ctx.fillRect(pixelX + 1, pixelY + 1, this.cellSize - 2, (this.cellSize - 2) / 2);

        // 绘制阴影效果
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        this.ctx.fillRect(pixelX + 1, pixelY + (this.cellSize - 2) / 2, this.cellSize - 2, (this.cellSize - 2) / 2);
    }

    /**
     * 绘制单元格（相对坐标）
     */
    private drawCellRelative(x: number, y: number, color: string): void {
        const pixelX = x * this.cellSize;
        const pixelY = y * this.cellSize;

        this.ctx.fillStyle = color;
        this.ctx.fillRect(pixelX + 1, pixelY + 1, this.cellSize - 2, this.cellSize - 2);

        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        this.ctx.fillRect(pixelX + 1, pixelY + 1, this.cellSize - 2, (this.cellSize - 2) / 2);

        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        this.ctx.fillRect(pixelX + 1, pixelY + (this.cellSize - 2) / 2, this.cellSize - 2, (this.cellSize - 2) / 2);
    }

    /**
     * 绘制游戏信息
     */
    drawInfo(
        score: number,
        lines: number,
        level: number,
        x: number,
        y: number
    ): void {
        this.ctx.fillStyle = '#ffffff';
        this.ctx.font = '16px Arial';
        this.ctx.textAlign = 'left';

        this.ctx.fillText(`分数: ${score}`, x, y);
        this.ctx.fillText(`行数: ${lines}`, x, y + 25);
        this.ctx.fillText(`等级: ${level}`, x, y + 50);
    }

    /**
     * 绘制游戏状态文本（暂停、游戏结束等）
     */
    drawStatus(text: string): void {
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.fillStyle = '#ffffff';
        this.ctx.font = 'bold 32px Arial';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.fillText(text, this.canvas.width / 2, this.canvas.height / 2);

        this.ctx.font = '16px Arial';
        this.ctx.fillText('按空格键继续', this.canvas.width / 2, this.canvas.height / 2 + 40);
    }

    /**
     * 获取画布宽度
     */
    getCanvasWidth(): number {
        return this.canvas.width;
    }

    /**
     * 获取画布高度
     */
    getCanvasHeight(): number {
        return this.canvas.height;
    }
}

